<template>
  <el-header class="el-header" style="height: 100%; z-index:999">
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col class="herder_left" :span="12">
        <img class="logo" src="../../assets/image/logo.png" alt />
      </el-col>
      <el-col class="herder_right" :span="12">
        <div class="herder_right_horizontal">
          <el-menu
            :default-active="$route.path"
            class="header-menu"
            mode="horizontal"
            active-text-color="#ffffff"
            @select="handleSelect"
            router
          >
            <el-menu-item index="/" style="text-align: center">首页</el-menu-item>
            <el-submenu index="/successCase">
              <template slot="title" class="submenu_tit">成功案例</template>
              <el-menu-item class="submenuStyle" index="/operatingLoan">经营贷系统</el-menu-item>
              <el-menu-item class="submenuStyle" index="/onlineCarRental">网约车租赁系统</el-menu-item>
              <el-menu-item class="submenuStyle" index="/consumerFinance">消费金融业务系统</el-menu-item>
              <el-menu-item class="submenuStyle" index="/supplyChainFinance">供应链金融业务系统</el-menu-item>
<!--              <el-menu-item class="submenuStyle" index="/mortgageLoan">房抵贷业务管理系统</el-menu-item>-->
              <el-menu-item class="submenuStyle" index="/wealthAssets">财富资产业务管理系统</el-menu-item>
              <el-menu-item class="submenuStyle" index="/smartSMS">智慧短信</el-menu-item>
              <el-menu-item class="submenuStyle" index="/smartCard">智慧名片</el-menu-item>
            </el-submenu>
            <el-submenu index="/aboutUs">
              <template slot="title" class="submenu_tit">关于我们</template>
              <el-menu-item class="submenuStyle" index="/companyProfile">公司简介</el-menu-item>
              <el-menu-item class="submenuStyle" index="/technicalAdvantages">技术优势</el-menu-item>
              <el-menu-item class="submenuStyle" index="/customers">我们的客户</el-menu-item>
              <el-menu-item class="submenuStyle" index="/joinUs">加入我们</el-menu-item>
            </el-submenu>
            <el-menu-item index="/contactUs">联系我们</el-menu-item>
          </el-menu>
        </div>
        <span class="herder_right_vertical" @click="showAsides">
          <img src="" style="color: white" />
        </span>
        <el-menu
          ref="elMenuVertical"
          v-show="isShowAsides"
          :default-active="$route.path"
          class="el-menu-vertical"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          router
        >
          <el-menu-item index="/">首页</el-menu-item>
          <el-submenu index="/successCase">
            <template slot="title">成功案例</template>
            <el-menu-item class="submenuStyle" index="/operatingLoan">经营贷系统</el-menu-item>
            <el-menu-item class="submenuStyle" index="/onlineCarRental">网约车租赁系统</el-menu-item>
            <el-menu-item class="submenuStyle" index="/consumerFinance">消费金融业务系统</el-menu-item>
            <el-menu-item class="submenuStyle" index="/supplyChainFinance">供应链金融业务系统</el-menu-item>
<!--            <el-menu-item class="submenuStyle" index="/mortgageLoan">房抵贷业务管理系统</el-menu-item>-->
            <el-menu-item class="submenuStyle" index="/wealthAssets">财富资产业务管理系统</el-menu-item>
            <el-menu-item class="submenuStyle" index="/smartSMS">智慧短信</el-menu-item>
            <el-menu-item class="submenuStyle" index="/smartCard">智慧名片</el-menu-item>
          </el-submenu>
          <el-submenu index="/aboutUs">
            <template slot="title" class="submenu_tit">关于我们</template>
            <el-menu-item class="submenuStyle" index="/companyProfile">公司简介</el-menu-item>
            <el-menu-item class="submenuStyle" index="/technicalAdvantages">技术优势</el-menu-item>
            <el-menu-item class="submenuStyle" index="/customers">我们的客户</el-menu-item>
            <el-menu-item class="submenuStyle" index="/joinUs">加入我们</el-menu-item>
          </el-submenu>
          <el-menu-item index="/contactUs">联系我们</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
export default {
  name: "header_",
  data() {
    return {
      isShowAsides: false,
      isCollapse: false
    };
  },
  created() {},
  mounted() {
    let _this = this;
    document.addEventListener('click', function (e) {
      let flag = e.target.contains(document.getElementsByClassName('el-menu-vertical')[0]);
      if (!flag) return;
      _this.isShowAsides = false;
    });
  },
  methods: {
    // eslint-disable-next-line no-unused-vars
    handleSelect(key, keyPath) {
      console.log("banner");
    },

    showAsides() {
      this.isShowAsides = !this.isShowAsides;
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style>
.el-menu--horizontal > .el-submenu .el-submenu__title {
  color: white !important;
  height: 50px !important;
}
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  color: white !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

.el-submenu__title i {
  padding: 0 !important;
  color: white !important;
}

.submenuStyle {
  color: #616161 !important;
}
.submenuStyle:hover {
  color: #1a67f5 !important;
}

.el-menu-item {
  min-width: 56px !important;
  height: 50px !important;
}

.el-submenu__title {
  padding: 0 !important;
  margin: 0 10px;
}

.el-menu-vertical {
  width: 200px !important;
  min-height: 200px;
  text-align: left;
}

.el-menu-vertical .el-submenu__title i {
  color: black !important;
}
</style>

<style scoped lang="scss">
.el-header {
  padding: 1rem 1.5rem 0.75rem 1.5rem;
  color: white;
  width: 100%;
  height: 50px;
  position: absolute;
  /*background-color: rgba(0, 0, 0, 0.3);*/
}
.herder_left {
  text-align: left;
  height: 50px;
  line-height: 50px;
  margin-left: 152px;
  .logo {
    height: 40px;
  }
}

.herder_right {
  background-color: rgba(0, 0, 0, 0);

  .herder_right_horizontal {
    position: absolute;
    right: 152px;
    /*visibility: hidden;*/

    .el-menu {
      background-color: rgba(0, 0, 0, 0) !important;
    }
    .el-menu.el-menu--horizontal {
      border-bottom: none !important;
    }
    .el-menu-item {
      color: white;
    }
    .el-menu-item:hover,
    .el-menu-item:focus {
      color: white !important;
      background-color: rgba(0, 0, 0, 0) !important;
    }
  }

  .herder_right_vertical {
    content: url("../../assets/image/menu.png");
    width: 16px;
    height: 14px;
    position: absolute;
    right: 15px;
    display: none;
  }
}

@media screen and (min-width: 415px) {
  .el-header {
    min-width: 1024px;
  }
}

/**
  移动端样式
   */
@media screen and (max-width: $mobile_width) {
  .herder_left {
    margin-left: 10px;
    height: 20px;
    line-height: 20px;
    .logo {
      height: 20px;
    }
  }

  .herder_right_horizontal {
    display: none;
  }
  .herder_right_vertical {
    width: 2rem !important;
    display: block !important;
  }
}
</style>
